<template>
  <div>
    <van-row class="order_status">
      <van-col span="6">
        <div class="order_status_icon" @click="showLeave = true">
          <van-icon name="edit-data"/>
        </div>
        <div>请假</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon">
          <van-icon name="edit-data"/>
        </div>
        <div>请假</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon">
          <van-icon name="edit-data"/>
        </div>
        <div>请假</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon">
          <van-icon name="edit-data"/>
        </div>
        <div>请假</div>
      </van-col>
    </van-row>
    <van-popup v-model="showLeave" position="right" style="width:100%;height:100%">
      <van-nav-bar
        title="请假申请"
        left-text="返回"
        left-arrow
        @click-left="showLeave = false"
      />
      <van-cell-group>
        <van-field
          v-model="applyUser.name"
          label="请假员工"
          placeholder="请选择请假员工"
          readonly
          @click="showEmployees = true"
        />
        <van-field
          v-model="applyType.name"
          label="请假类型"
          placeholder="请选择请假类型"
          readonly
          @click="showApplyTypes = true"
        />
        <van-field
          v-model="beginDate"
          type="date"
          label="开始日期"
          placeholder="请选择开始日期"
          @change="dateChange"
        />
        <van-field
          v-model="endDate"
          type="date"
          label="结束日期"
          placeholder="请选择结束日期"
          @change="dateChange"
        />
        <van-field
          v-model="applyDays"
          readonly
          label="请假天数"
        />
        <van-field
          v-model="reasonDes"
          label="原因"
          type="textarea"
          placeholder="请输入请假原因"
          clearable
          rows="1"
          autosize
        />
      </van-cell-group>
      <van-button :disabled="1 === 0" style="position: absolute; bottom: 0px;left: 0px;" type="primary" size="large" @click="submit">提交</van-button>
      <van-actionsheet
        v-model="showApplyTypes"
        :actions="applyTypes"
        cancel-text="取消"
        @select="onSelectApplyType"
      />
      <van-actionsheet
        v-model="showEmployees"
        :actions="employees"
        cancel-text="取消"
        @select="onSelectEmployee"
      />
    </van-popup>
  </div>
</template>

<script>
import request from '@/utils/request';

  export default {
    data() {
      return {
        showLeave: false,
        applyUser: {},
        applyType: {},
        beginDate: '',
        endDate: '',
        applyDays: '',
        reasonDes: '',
        showApplyTypes: false,
        showEmployees: false,
        employees: [
          {
            name: '张三',
            value: 1
          },
          {
            name: '李四',
            value: 2
          },
          {
            name: '王五',
            value: 3
          },
        ],
        applyTypes: [
          {
            name: '事假',
            value: 1,
          },
          {
            name: '年假',
            value: 2,
          },
          {
            name: '婚假',
            value: 3,
          },
          {
            name: '产假',
            value: 4,
          },
          {
            name: '其他',
            value: 9,
          },
        ],
      }
    },
    methods: {
      submit() {
        request({
          url: '/userApply/insert',
          method: 'post',
          data: {
            applyUser: this.applyUser.value,
            applyType: this.applyType.value,
            beginDate: this.beginDate,
            endDate: this.endDate,
            applyDays: this.applyDays,
            reasonDes: this.reasonDes
          }
        }).then(res => {
          let data = res.data;
          if (data.result === 'success') {
            this.showLeave = false;
            this.$toast({message: '提交成功'});
          }
        });
      },
      onSelectApplyType(item) {
        this.showApplyTypes = false;
        this.applyType = item;
      },
      onSelectEmployee(item) {
        this.showEmployees = false;
        this.applyUser = item;
      },
      dateChange() {
        if(!this.beginDate || !this.endDate) {
          return;
        }
        if (this.beginDate > this.endDate) {
          this.$dialog.alert({
            message: '结束时间不能小于开始时间!'
          });
        } else {
          let s1 = new Date(this.beginDate.replace(/-/g, "/"));
          let s2 = new Date(this.endDate.replace(/-/g, "/"));
          let days = s2.getTime() - s1.getTime();
          let time = parseInt(days / (1000 * 60 * 60 * 24));
          this.applyDays = time + 1;
        }
      }
    },
  }
</script>

<style scoped>
  .order_status {
		background-color: #fff;
		text-align: center;
		padding: 10px 0;
		font-size: 12px;
  }
  .order_status_icon{
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-block;
  }
  .order_status_icon > i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      font-size: 24px;
      color: #000;
  }
</style>